<!--
 * @Author: toString muzi_li0323@163.com
 * @Date: 2024-05-22 20:22:04
 * @LastEditors: toString muzi_li0323@163.com
 * @LastEditTime: 2024-05-23 19:58:24
 * @FilePath: /chain-link-api-front/src/views/login/index.vue
 * @Description: Login
-->
<template>
  <div class="container block login">
    <div class="box left-box login-form">

      <!-- Logo -->
      <TopLogo></TopLogo>

      <p class="links">
        <img src="@/assets/images/sign/lock_url.svg" alt="">
        URL verification: <span>{{ locationHref }}</span>
      </p>

      <div class="main" >
        <div class="login-title"> {{ t('global.LoginBlockWatch') }} </div>
        <el-form :model="forms" ref="ruleRef" label-width="auto" :rules="rules" label-position="top">
          <el-form-item :label="t('global.UserName')" prop="username" style="width: 100%">
            <el-input v-model.trim="forms.username" :placeholder="t('global.PleaseInputUserName')" style="border-radius: 30px"/>
          </el-form-item>
          <el-form-item :label="t('global.PassWord')" prop="password" style="width: 100%;margin:.3rem 0 .5rem 0">
            <el-input v-model.trim="forms.password" type="password" show-password :placeholder="t('global.PleaseInputPassWord')" @keyup.enter="handleEnter"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submit" :loading="loading">{{ t('home.Login') }}</el-button>
          </el-form-item>
        </el-form>
      </div>

      <login-footer :footerType="'login'"></login-footer>
    </div>

    <!--  右侧图片  -->
    <RightImg></RightImg>
  </div>

</template>

<script setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router';
import { useUserStore } from "@/stores";
import { ElMessage } from "element-plus";
import TopLogo from '@/components/LoginCom/TopLogo.vue';
import LoginFooter from '@/components/LoginCom/loginFooter.vue';
import RightImg from '@/components/LoginCom/RightImg.vue';
import { login } from '../../require/api'
import { useI18n } from "vue-i18n";

const { t } = useI18n();

const footerType = ref('login')

const locationHref = ref('');
locationHref.value = window.location.href;
const router = useRouter();
const userStore = useUserStore();
const eye = ref(true)
const ruleRef = ref(null);
const loading = ref(false)

const rules = reactive({
  username: [{ required: true, message: t('message.UserNameIsNull'), trigger: 'blur' }],
  password: [
    { required: true, message: t('message.PWDIsNull'), trigger: 'blur' },
    { min: 8, max: 16, message: t('message.PWDLength'), trigger: 'blur' },
    {
      pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,16}$/,
      message: t('message.PWDAa09'), trigger: 'blur'
    }
  ],
})

const forms = reactive({
  username: '',
  password: '',
})

// 登录方法
async function submit() {
    try {
      loading.value = true;
      if (forms.username === "" || forms.password === "") {
        ElMessage.error(t("message.InputAll"));
        return;
      }
      const { code, data, msg } = await login({
        username: forms.username,
        password: forms.password,
      });
      if (code === 200) {
        console.log(data)
        ElMessage.success(t('message.LoginSuccess'))
        userStore.setToken(data.token);
        userStore.setUserInfo(data);
        router.push({ name: 'dashboard' });
      } else {
        ElMessage.error(msg);
      }
    }catch (e){
      console.log(e)
    }finally {
      loading.value = false;
    }
}

// 在输入密码的 input 按下回车键
const handleEnter = () => {
  submit();
};


</script>

<style scoped lang="less">
//element plus样式 start
.el-form {
  :deep(.el-select__wrapper) {
    height: .42rem;
    border-radius: 8px;
  }

  :deep(.el-input__wrapper) {
    border-radius: 8px;
  }

  :deep(.el-input) {
    height: .42rem;
  }

  :deep(.el-button) {
    border-radius: 8px;
    width: 3rem;
    height: .42rem;
  }
}

.example-showcase .el-dropdown+.el-dropdown {
  margin-left: 15px;
}

.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}

//element plus样式 end

/****** 底部“简体中文按钮” ******/
.simpleChinese.is-text:not(.is-disabled):focus-visible {
  outline: none;
}

// 顶部链接样式
.links{
  .logoImg{
    width: 100%;
  }
}

//  udun钱包用户服务协议
.dialog-footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  :deep(.el-button) {
    margin-top: .3rem;
    height: 45px !important;
    width: 100px !important;
    border-radius: 8px;
  }
}

// 注册用户协议
.ProtocolBox {
  height: 5rem;

  .content {
    height: 100%;
    overflow-y: auto;

    p {
      margin: 1rem 0;
    }
  }

  /* 滚动条整体样式 */

  .content::-webkit-scrollbar {
    width: 5px;
    height: 10px;
    background-color: #f5f5f5;
  }

  /* 滚动条thumb(滑块)样式 */

  .content::-webkit-scrollbar-thumb {
    width: 5px;
    height: 10px;
    background-color: #9a9a9a;
    border-radius: .5rem;
  }

  /* 滚动条hover状态下thumb(滑块)样式 */
  .content::-webkit-scrollbar-thumb:hover {
    background-color: #555;
  }

  /* 滚动条上下箭头样式 */
  .content::-webkit-scrollbar-button {
    background-color: #ccc;
    display: none;
  }

  /* 滚动条左右箭头样式 */
  .content::-webkit-scrollbar-button:start:decrement,
  .content::-webkit-scrollbar-add-button {
    display: none;
  }

  .content::-webkit-scrollbar-button:end:increment,
  .content::-webkit-scrollbar-sub-button {
    display: none;
  }
}
</style>
